<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id = "app">
        <h1 v-if="uuid===1">{{content + uuid}}</h1>
        <h3>这是用来打断结构的{{uuid}}</h3>
        <h1 v-else-if="uuid===2">{{content + uuid}}</h1>
        <h1 v-else>{{content + uuid}}</h1>
        <div v-show="uuid === 4">
            <h1>{{title + uuid}}</h1>
        </div>
        <button @click="updateData">点我切换显示内容</button>
    </div>
<!--

 条件渲染:
    1.v-if
        写法:
            (1).v-if="表达式"
            (2).v-else-if="表达式"
            (3).v-else="表达式"
            适用于:切换频率较低的场景。
        特点:不展示的DOM元素中按被移除。
        注意:v-if可以和:v-else-tr、v-e1s起使用，但要求结构不能被“打断”。
    2.v-show
        写法:
            v-show="表达式"
            适用于:切换频率较高的场景。
        特点:不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
    3.备注:使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

-->
</body>
<script>
    Vue.config.productionTip = false;
    new Vue({
        el: '#app',
        data: {
            uuid: 1,
            title: "标题",
            content: "内容"
        },
        methods: {
            updateData(){
               this.uuid++;
            }
        }
    })
</script>
</html>